<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
    </div>

    <script>
        // school包含student
        const student = {
            template: `
            <div>
                <li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li>
            </div>
            `,
            data() {
                return {
                    persons: [
                        {
                            name: "索隆",
                            age: "20",
                        },
                        {
                            name: "罗斌",
                            age: "21",
                        },
                        {
                            name: "娜美",
                            age: "19",
                        },
                    ]
                }
            },
        }

        const school = Vue.extend({
            template: `
            <div>
                <p>{{schoolName}}</p>
                <p>{{address}}</p>
                <student></student>
            </div>
            `,
            data() {
                return {
                    schoolName: "海贼王",
                    address: "one place",
                }
            },
            components: {
                student: student,
            }
        })

        const hello = Vue.extend({
            template: `
            <div>
                <p>The man who will be One Piece</p>
                <p>{{person.name}}-{{person.age}}</p>
            </div>`,
            data() {
                return {
                    person: {
                        name: "路飞",
                        age: "18"
                    }
                }
            },

        })

        /* new Vue({
            el: "#root",
            components: {
                school: school,
            }
        }) */

        // 标准化写法
        const app = Vue.extend({
            template: `
            <div>
                <school></school>
                <hello></hello>
            </div>
            `,
            components: {
                school: school,
                hello: hello,
            }
        })

        const vm = new Vue({
            template: `<app></app>`,
            el: "#root",
            components: {
                app,
            }
        })

    </script>
</body>

</html>